<template>
	<div class="box">
		<div id="screenshot">
			<p class="title">肥胖发病风险等级及其动态分析评估报告</p>
			<table>
				<tr v-if="!info.oldSicknessDangeAssessmentEntityVo">
					<th>发病危险因素</th>
					<th>
						<p>检查结果</p>
						<p>{{info.fillFormDate}}</p>
					</th>
					<th>评估</th>
					<th>
						<p>检查结果</p>
						<p>日期</p>
					</th>
					<th>评估</th>
					<th><p>风险趋势</p></th>
					<th><p>正常参考<br/>值范围</p></th>
					<th>单位</th>
				</tr>
				<tr v-else>
					<th>发病危险因素</th>
					<th>
						<p>检查结果</p>
						<p>{{info.oldSicknessDangeAssessmentEntityVo.fillFormDate}}</p>
					</th>
					<th>评估</th>
					<th>
						<p>检查结果</p>
						<p>{{info.fillFormDate}}</p>
					</th>
					<th>评估</th>
					<th><p>风险趋势</p></th>
					<th><p>正常参考<br/>值范围</p></th>
					<th>单位</th>
				</tr>
				<template v-if="!info.oldSicknessDangeAssessmentEntityVo">
					<tr v-for="(item,index) in info.userOptionValueVos" :key="index">
						<td><span>{{item.name}}</span></td>
						<td>
							<span v-if="!item.assessmentValueVo">{{item.value}}</span>
							<div v-else>
								<p>{{item.assessmentValueVo.oneValue}}</p>
								<p>{{item.assessmentValueVo.towValue}}</p>
							</div>
						</td>
						<td><span>{{item.assessment}}</span></td>
						<td><span></span></td>
						<td><span></span></td>
						<td><span></span></td>
						<td><span>{{item.reference}}</span></td>
						<td><span>{{consult[index]}}</span></td>
					</tr>
				</template>
				<template v-else>
					<tr v-for="(item,index) in info.userOptionValueVos" :key="index">
						<td><span>{{item.name}}</span></td>
						<td>
							<span v-if="!item.assessmentValueVo">{{info.oldSicknessDangeAssessmentEntityVo && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index] && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index].value}}</span>
							<div v-else>
								<p>{{info.oldSicknessDangeAssessmentEntityVo && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index] && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index].assessmentValueVo.oneValue}}</p>
								<p>{{info.oldSicknessDangeAssessmentEntityVo && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index] && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index].assessmentValueVo.towValue}}</p>
							</div>
						</td>
						<td><span>{{info.oldSicknessDangeAssessmentEntityVo && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index] && info.oldSicknessDangeAssessmentEntityVo.userOptionValueVos[index].assessment}}</span></td>
						<td>
							<span v-if="!item.assessmentValueVo">{{item.value}}</span>
							<div v-else>
								<p>{{item.assessmentValueVo.oneValue}}</p>
								<p>{{item.assessmentValueVo.towValue}}</p>
							</div>
						</td>
						<td><span>{{item.assessment}}</span></td>
						<td><span>{{item.riskTrends}}</span></td>
						<td><span>{{item.reference}}</span></td>
						<td><span>{{consult[index]}}</span></td>
					</tr>
				</template>
				<tr v-if="!info.oldSicknessDangeAssessmentEntityVo">
					<td><span>患病风险</span></td>
					<td colspan="2"><span>{{info.riskillness}}</span></td>
					<td colspan="2"><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
				</tr>
				<tr v-else>
					<td><span>患病风险</span></td>
					<td colspan="2"><span>{{info.oldSicknessDangeAssessmentEntityVo && info.oldSicknessDangeAssessmentEntityVo.riskillness}}</span></td>
					<td colspan="2"><span>{{info.riskillness}}</span></td>
					<td><span></span></td>
					<td><span></span></td>
					<td><span></span></td>
				</tr>
			</table>
			<div class="decode">
				{{info.comment}}
			</div>
		</div>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		data() {
			return {
				base64: '',
				consult:['kg/m²','','','次/周','g','g','g/Kg','ml','mg','','','',''],
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 100px;
		left: 0;
		top: -10000px;
		top: 30px;
		#screenshot{
			height: 100%;
		}
		top: -10000px;
		.title {
			color: #00B25C;
			font-size: 40px;
			font-weight: bold;
			margin-top: 45px;
		}
		table {
				width: 100%;
				border-spacing: 0;
				margin-top: 42px;
				word-wrap: break-word;
				word-break: break-all;
				border-left: 1px solid #06C17D;
				border-radius: 8px;
				tr {
					color: #FFFFFF;
					font-size: 20px;
					color: #00C481;	
					td {
						padding: 0;
						box-sizing: border-box;
						border-right: 1px solid #06C17D;
						font-size: 18px;
						border-bottom: 1px solid #06C17D;
						background-color: #F6FFFB;
						span{
							padding: 6px;
							display: flex;
							align-items: center;
							min-height:  40px;
						}
						div{
							p{
								padding: 6px;
								border-bottom: 1px solid #06C17D;
								&:nth-last-child(1){
									border: none;
								}
							}
						}
					}
					td:last-child{
					}
				}
				tr:nth-child(odd) {
					td{
						background-color: #E2FBEF;
					}
				}
				tr:first-child{
					color: #FFFFFF;
					height: 92px;
					font-size: 23px;
					border: none;
					th {
						background-color: #00C481;
						height: 92px;	
						line-height: 92px;
						border-radius: 8px 8px 0px 0px;
						border-right: 1px solid #FFFFFF;
						padding-left: 6px;
						box-sizing: border-box;
						font-weight: 500;
					}
					th:nth-child(1),th:nth-child(7) {
						width: 164px !important;										
					}
					th:nth-child(2),th:nth-child(4) {
						// width: 141px;
						padding: 0;
						p {
							height: 46px;
							line-height: 46px;
							border-bottom: 1px solid #FFFFFF;
							padding-left: 8px;
						}
						p:last-child {
							border: none;
							padding-left: 8px;
						}
					}
					th:nth-child(6),th:nth-child(7)  {
						line-height: 0;
						p {
							line-height: 28px;
							margin-top: 18px;
						}
					}
					th:last-child {
						border-right: 1px solid #00C481;
					}
				}
				tr:last-child {
					tr{
						font-weight: bold;
						font-size: 23px;
						min-height: 70px;
						td {			
							border-right: 1px solid #06C17D;
							border-bottom: 1px solid #06C17D;
							
						}
					}
				}
			}
		}
	.decode{
		margin-top: 20px;
		h2{
			font-size: 26px;
			color: #00C481;
			margin-bottom: 20px;
		}
		font-size: 24px;
		color: #00C481;
	}
</style>
